<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
        <div style="color: aqua;">
            {{show}}

        </div>
    </div>

    <div id="app2" style="color: blue;">
        <span :title="message1">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
       <span :style="'color:'+ color + ';'">能变颜色的内容</span>
    </div>

    <div id="app3">
        <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="app4" style="color: chocolate;">
        <ol>
            <li v-for="d in list">{{d}}</li>
        </ol>
    </div>

    <script>
        var app =new Vue({
            el:"#app",
            data:{
                message:"一个变量",
                show:"第二个变量"
            }
        })

        var app2=new Vue({
            el:'#app2',
            data:{
                message1:"页面加载于"+new Date().toLocaleString(),
                color:'blue'
            }
        })

        var app3=new Vue({
            el:"#app3",
            data:{
                seen:true
            }
        })

        var app4=new Vue({
            el:"#app4",
            data:{
                list:['衣服','裤子','鞋子','帽子','眼镜']
            }
        });
    </script>
    <hr>



</body>
</html>